<template>
	<view class="container">
		<NavBar title="加油记录"/>
		<scroll-view scroll-y class="list" >
			<!-- <view class="" v-if="fuelRecords.length==0">
				暂无数据
			</view> -->
			<uv-empty mode="data" text="暂无数据" v-if="fuelRecords.length==0" ></uv-empty>
			<uv-collapse accordion>
				<uv-collapse-item :title="item.createTime" v-for="(item,i) in fuelRecords" :key="item.id">
					<view class="record-item">
						<view class="item-left">
							加油量
						</view>
						<view class="item-right">
							{{item.oilNum}} L
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							加油金额
						</view>
						<view class="item-right sum-box">
							<text class="sum-icon">￥</text>
							<text class="sum">{{item.oilAmt}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							油品单价
						</view>
						<view class="item-right sum-box">
							<text class="sum-icon">￥</text>
							<text class="sum">{{item.unitPrice}}</text>
							<text>元</text>
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							油款承担方
						</view>
						<view class="item-right oilContractName">
							{{item.oilContractName}}
						</view>
					</view>
					
					<!-- <view class="record-item">
						<view class="item-left">
							附件
						</view>
						<view class="item-right">
							125.36 L
						</view>
					</view> -->
					<!-- <view class="receipts-container" v-if="item.receiptUrl.split(',').length>0">
						<uv-image 
							 class="receipt-item" 
							 v-for="(img,index) in item.receiptUrl.split(',')" 
							 :src="img" 
							 width="160rpx" 
							 height="160rpx"
							 @click="previewImage(item.receiptUrl.split(','),index)"
						></uv-image>
					</view> -->
				</uv-collapse-item>
			</uv-collapse>
		</scroll-view>
		
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { refuelLog } from '@/utils/app.js'
	export default {
		components:{NavBar},
		data() {
			return {
				fuelRecords: [
				  
				]
			};
		},
		onLoad(option) {
			console.log(option);
			this.refuelLogList(option)
		},
		methods:{
			previewImage(urls, current){
				uni.previewImage({
				  urls: urls,
				  current: urls[current]
				});
			},
			refuelLogList(data){
				refuelLog(data).then(res=>{
					console.log(res);
					this.fuelRecords = res.data
				}).catch(err=>{
					uni.showToast({
					  title: '请求错误',
					  icon: 'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{
	height: calc(100vh - 180rpx);
	background-color: #FFFFFF;
	
	.record-item{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #000;
		border-bottom: 1rpx solid #EEEEEE;
		.item-left{
			width: 162rpx;
			height: 112rpx;
			line-height: 112rpx;
			// margin-right: 20rpx;
			
		}
		.item-right{
			flex: 1;
			color: rgba(0, 0, 0, 0.85);
		}
		.oilContractName{
			margin-left: 10rpx;
		}
		.sum-box{
			display: flex;
			.sum{
				flex: 1;
			}
			.sum-icon{
				margin-right: 10rpx;
			}
		}
	}
	.receipts-container{
		display: flex;
		.receipt-item{
			margin-right: 16rpx;
		}
	}
}
</style>
